<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 378.994 294.279"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1"
          y1="0.5"
          x2="0"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="0.5"
          y1="1"
          x2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" stop-opacity="0" />
          <stop offset="1" :stop-color="states.color" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-4"
          x1="1"
          y1="0.5"
          x2="0"
          y2="0.5"
          xlink:href="#linear-gradient-2"
        />
      </defs>
      <g id="文字边框3" transform="translate(-54 -217.996)">
        <g
          id="矩形_569"
          data-name="矩形 569"
          transform="translate(54 248)"
          :fill="states.color"
          opacity="0.1"
          stroke="rgba(0,237,255,0.4)"
          stroke-linejoin="round"
          stroke-width="2"
        >
          <rect width="378.994" height="264.275" stroke="none" />
          <rect x="1" y="1" width="376.994" height="262.275" fill="none" />
        </g>
        <rect
          id="矩形_579_拷贝"
          data-name="矩形 579 拷贝"
          width="378.994"
          height="2"
          transform="translate(54 248)"
          fill="url(#linear-gradient)"
        />
        <rect
          id="矩形_579_拷贝_2"
          data-name="矩形 579 拷贝 2"
          width="2"
          height="80"
          transform="translate(430.994 248)"
          fill="url(#linear-gradient-2)"
        />
        <rect
          id="矩形_579_拷贝_5"
          data-name="矩形 579 拷贝 5"
          width="2"
          height="80"
          transform="translate(54 248)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="矩形_571"
          data-name="矩形 571"
          d="M1146.984,750h325.2v2.026H1144Z"
          transform="translate(-1090 -507.623)"
          :fill="states.color"
        />
        <path
          id="矩形_584"
          data-name="矩形 584"
          d="M1144,745h181.368l16.647,25.286H1144Z"
          transform="translate(-1090 -525.883)"
          :fill="states.color"
        />
        <rect
          id="矩形_571_拷贝"
          data-name="矩形 571 拷贝"
          width="10"
          height="5"
          transform="translate(422.994 240)"
          :fill="states.color"
        />
        <rect
          id="矩形_571_拷贝_2"
          data-name="矩形 571 拷贝 2"
          width="10"
          height="5"
          transform="translate(407.994 240)"
          :fill="states.color"
          opacity="0.6"
        />
        <rect
          id="矩形_571_拷贝_3"
          data-name="矩形 571 拷贝 3"
          width="9"
          height="5"
          transform="translate(392.994 240)"
          :fill="states.color"
          opacity="0.2"
        />
        <rect
          id="矩形_576"
          data-name="矩形 576"
          width="6"
          height="7"
          transform="translate(61 255)"
          :fill="states.color"
        />
        <rect
          id="矩形_576_拷贝"
          data-name="矩形 576 拷贝"
          width="7"
          height="7"
          transform="translate(72 255)"
          :fill="states.color"
          opacity="0.6"
        />
        <rect
          id="矩形_576_拷贝_2"
          data-name="矩形 576 拷贝 2"
          width="7"
          height="7"
          transform="translate(83 255)"
          :fill="states.color"
          opacity="0.2"
        />
        <rect
          id="矩形_579_拷贝_3"
          data-name="矩形 579 拷贝 3"
          width="378.994"
          height="2"
          transform="translate(54 248)"
          fill="url(#linear-gradient-4)"
        />
        <path
          id="形状_570"
          data-name="形状 570"
          d="M1627,887.951h17.767V869Z"
          transform="translate(-1215.783 -380.07)"
          :fill="states.color"
          opacity="0.8"
        />
        <line
          id="直线_16"
          data-name="直线 16"
          x1="13.791"
          y1="20.383"
          transform="translate(247.117 219.117)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="4"
        />
        <line
          id="直线_17"
          data-name="直线 17"
          x1="13.791"
          y1="20.383"
          transform="translate(258.652 219.117)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="4"
          opacity="0.6"
        />
        <line
          id="直线_18"
          data-name="直线 18"
          x1="13.791"
          y1="20.383"
          transform="translate(270.187 219.117)"
          fill="none"
          :stroke="states.color"
          stroke-miterlimit="10"
          stroke-width="4"
          opacity="0.2"
        />
      </g>
      <text
        x="20%"
        y="7%"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

onMounted(() => {});
</script>

<style scoped lang="scss"></style>
